<template>
<div class="order-item">
    <div class=" shop-name text-left flex-center-space-between">
        <span class="fz-15 blod">{{ value.mch_name }}</span>  <span class="fz-12">{{ value.status_name }}</span>
    </div>
    <div class="order-goods flex-center" v-for="goods in value.goods_list" :key="goods.id">
        <a href="javascript:;" v-if="goods.type === 1">
            <img :src="goods.img" alt="">
        </a>
        <RouterLink :to="`/product?id=${goods.goods_id}`" v-else>
            <img :src="goods.img" alt="">
        </RouterLink>
        <div class="goods_msg flex-1 flex-column-space-between">
            <div class="name van-multi-ellipsis--l2 fz-12 blod text-left">
                <span>{{ goods.name }}</span>
            </div>
            <div class="padd text-left flex-center-space-between">
                <span>品牌： {{ goods.brand_name }}</span>
                <span class="price fz-15 blod">￥{{ goods.price }}</span> <span class="fz-12">x{{ goods.num }}</span>
            </div>
            <div class="flex-center-space-between  fz-12">
                <div>
                    <template v-if="value.status === 3 && goods.is_back_status === 4">
                        <span class="price fz-12">已退款</span>
                    </template>
                </div>
                <div class="flex-center">
                    <van-button type="danger" size="mini" plain round hairline v-if="value.status === 1 && value.is_send === 1" @click="$emit('confirmTake', value.id)">确认收货</van-button>
                    <van-button type="info" size="mini" plain round hairline v-if="value.status !== 0 && value.status !== 2" @click="$router.push(`/logistic?id=${value.id}`)">订单详情</van-button>
                    <van-button type="default" size="mini" plain round hairline v-if="value.status === 0" @click="$emit('cancelOrder', value.id)">取消订单</van-button>
                    <van-button type="danger" size="mini" v-if="value.status === 0" @click="$router.push(`/pay?id=${value.id}`)">立即付款</van-button>
                    
                    <template v-if="value.status === 3">
                         <!-- is_back_status   1-待审核 2-商家同意退货 填写物流信息 3-拒绝 4-已退款 5-完成 6-买家已填写物流 -->
                        <van-button @click="$router.push(`/after-sale?id=${goods.id}`)" type="danger" size="mini" plain v-if="goods.is_back_status !== 4 ">
                            <span v-if="goods.is_back_status === 0">退款/售后</span>
                            <span v-if="goods.is_back_status === 1">待审核</span>
                            <span v-if="goods.is_back_status === 2">商家同意退货</span>
                            <span v-if="goods.is_back_status === 3">已拒绝</span>
                            <span v-if="goods.is_back_status === 4">已退款</span>
                            <span v-if="goods.is_back_status === 5">完成</span>
                            <span v-if="goods.is_back_status === 6">已填写物流</span>
                        </van-button>
                    </template>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
export default {
    props: {
        value: {
            type: Object,
            default: () => {}
        }
    }
}
</script>

<style lang="less" scoped>
.order-item {
    max-width: 100%;
    background-color: #fff;
    padding: 10px 20px;
    margin-bottom: 10px;
    &:first-child {
        margin-top: 10px;
    }
    .shop-name {
        padding: 0 0 10px 0;
    }
    .order-goods {
        img {
            width: 80px;
            height: 80px;
        }
        .goods_msg {
            height: 80px;
            padding-left: 10px;
        }
    }
}
.button {
    padding: 2px 10px;
}
</style>
